<template>
    <div v-if="activeNews">
     <h1>ID:{{ route.query.id }}</h1>
      <h2>{{ activeNews.title }}</h2>
      <p>发布时间：{{ activeNews.publishTime }}</p>
      <hr>
      <p>{{ activeNews.content }}</p>
    </div>
    <div v-else>
      <p>暂无新闻数据</p>
    </div>
  </template>
  
  <script setup lang="ts">
  import { useRoute } from 'vue-router'
  import { newsList } from '@/data/newsData.ts'
  import { computed } from 'vue'
  
  const route = useRoute()
  
  // 计算属性自动响应路由变化
  const activeNews = computed(() => {
    const id = Number(route.query.id) || newsList.value[0]?.id // 默认显示第一条
    return newsList.value.find(news => news.id === id)//返回指定id的新闻数据
  })
  </script>